<template>
  <div class="show-change">
    <a-form-item :label="label" class="input-content">
      <div class="change-content">
        <a-input-number
          :min="lowConfig.min"
          :step="lowConfig.step"
          :max="lowConfig.max"
          placeholder="最低"
          v-model="lowPrice"
          ref="lPrice"
          @focus="showChangePrice"
          @change="changeLPrice"
          @keyup.enter="changePriceConfirm"
        />
        ~
        <a-input-number
          :min="highConfig.min"
          :step="highConfig.step"
          :max="highConfig.max"
          placeholder="最高"
          v-model="highPrice"
          ref="hPrice"
          @focus="showChangePrice"
          @change="changeHPrice"
          @keyup.enter="changePriceConfirm"
        />
      </div>
    </a-form-item>
    <div class="change-price-btn" v-show="!readonly">
      <a-button type="link" size="small" @click="changePriceClear">清空</a-button>
      <a-button size="small" @click="changePriceCancel" style="margin-left:8px;">取消</a-button>
      <a-button size="small" type="primary" @click="changePriceConfirm" style="margin-left:8px;"> 确定</a-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String
    },
    lowConfig: {
      type: Object,
      default: {
        min: -Infinity,
        max: Infinity,
        step: 1
      },
      required: false
    },
    highConfig: {
      type: Object,
      default: {
        min: -Infinity,
        max: Infinity,
        step: 1
      },
      required: false
    }
  },
  data() {
    return {
      lowPrice: '',
      highPrice: '',
      readonly: true,
      rank: {}
    }
  },
  methods: {
    // 修改价格
    showChangePrice() {
      this.readonly = false
    },
    changeLPrice(v) {
      this.lowPrice = v
    },
    changeHPrice(v) {
      this.highPrice = v
    },
    // 修改价格确认/取消/清空
    changePriceConfirm() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.rank.lprice = this.lowPrice
      this.rank.gprice = this.highPrice
      this.updateRank()
    },
    changePriceCancel() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.lowPrice = this.rank.lprice
      this.highPrice = this.rank.gprice
    },
    changePriceClear() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.lowPrice = ''
      this.highPrice = ''
      this.rank.lprice = ''
      this.rank.gprice = ''
      this.updateRank()
    },
    updateRank() {
      this.$emit('updateRank', this.rank.lprice, this.rank.gprice)
    }
  }
}
</script>
<style lang="less" scoped>
.show-change {
  background: #fff;
  position: relative;
  z-index: 2;
  width: 280px;
  .input-content {
    position: relative;
    z-index: 3;
  }
  .ant-form-item {
    margin-bottom: 12px;
  }
  .change-price-btn {
    position: absolute;
    padding: 53px 12px 12px 0;
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
    background: #fff;
    border: 1px solid #bfbfbf;
    top: -12px;
    left: -12px;
    z-index: 2;
    width: calc(100% + 36px);
    display: flex;
    justify-content: flex-end;
  }
  .change-content {
    width: 190px;
    .ant-input-number {
      width: 70px;
    }
  }
}
</style>
